<template>
  <div class="box">
    <!-- part2-三会-->
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="班级对比" name="first">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="年级:">
            <el-select v-model="firstGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="年份:">
            <el-select v-model="firstYear" placeholder="请选择">
              <el-option
                v-for="item in firstOption.years"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="会议类型:">
            <el-select v-model="firstType" placeholder="请选择">
              <el-option
                v-for="item in firstTypes"
                :key="item.id"
                :label="item.type"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="firstSearch">查询</el-button>
          </el-form-item>
        </el-form>

        <div id="firstChart" style="width: 90%; height: 400px"></div>

        <!-- 显示年级内班级对比信息 -->
        <el-table
          :data="firstData"
          style="width: 90%; margin: 0 auto; margin-top: 50px"
          :stripe="true"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.list" :border="true">
                <!-- <el-table-column prop="id" label="记录id"> </el-table-column> -->
                <el-table-column prop="date" label="时间"> </el-table-column>
                <el-table-column prop="address" label="地点"> </el-table-column>
                <el-table-column prop="host" label="主持人"> </el-table-column>
                <el-table-column prop="subject" label="主题"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      @click="open(scope.row)"
                      type="primary"
                      size="small"
                      plain
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="班级" prop="class"> </el-table-column>
          <el-table-column label="会议记录总数" prop="list.length">
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="历年数据" name="second">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin: 0 auto; width: 90%"
        >
          <el-form-item label="年级:">
            <el-select v-model="secondGrade" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.grade"
                :label="item.grade"
                :value="item.grade"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="班级:">
            <el-select v-model="secondClass" placeholder="请选择">
              <el-option
                v-for="item in secondOption.classes"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="会议类型:">
            <el-select v-model="secondType" placeholder="请选择">
              <el-option
                v-for="item in secondTypes"
                :key="item.id"
                :label="item.type"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="secondSearch">查询</el-button>
          </el-form-item>
        </el-form>

        <div id="secondChart" style="width: 1000px; height: 400px"></div>

        <el-table
          :data="secondData"
          style="width: 90%; margin: 0 auto; margin-top: 50px"
          :stripe="true"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.list" :border="true">
                <el-table-column prop="id" label="记录id"> </el-table-column>
                <el-table-column prop="date" label="时间"> </el-table-column>
                <el-table-column prop="address" label="地点"> </el-table-column>
                <el-table-column prop="host" label="主持人"> </el-table-column>
                <el-table-column prop="subject" label="主题"> </el-table-column>

                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      @click="open(scope.row)"
                      type="primary"
                      size="small"
                      plain
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="年份" prop="year"> </el-table-column>
          <el-table-column label="会议记录总数" prop="list.length">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="会议记录" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="时间:" :label-width="formLabelWidth">
          <span>{{ form.date }}</span>
        </el-form-item>
        <el-form-item label="地点:" :label-width="formLabelWidth">
          <span>{{ form.address }}</span>
        </el-form-item>
        <el-form-item label="主持人:" :label-width="formLabelWidth">
          <span>{{ form.host }}</span>
        </el-form-item>
        <el-form-item label="主题:" :label-width="formLabelWidth">
          <span>{{ form.subject }}</span>
        </el-form-item>
        <el-form-item label="人数:" :label-width="formLabelWidth">
          <span>{{ form.count }}</span>
        </el-form-item>
        <el-form-item
          label="主要内容:"
          v-show="form.content != null"
          :label-width="formLabelWidth"
        >
          <el-input
            :disabled="true"
            type="textarea"
            :value="form.content"
          ></el-input>
        </el-form-item>
        <el-form-item label="会议情况:" :label-width="formLabelWidth">
          <el-input
            :disabled="true"
            type="textarea"
            :value="form.condition"
          ></el-input>
        </el-form-item>
        <el-form-item label="会议总结:" :label-width="formLabelWidth">
          <el-input
            :disabled="true"
            type="textarea"
            :value="form.summary"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.box {
  margin: 0 auto;
  padding: 20px;
}
</style>

<script>
import { getGradeClassesYears } from "@/api/gradeClassesYears"
import { getGradeMeetingMinutes, getHistoryMeetingMinutes } from '@/api/part2/meetingMinutes'

export default {
  data() {
    return {
      options: [],
      firstGrade: 2017,
      firstOption: {},
      firstYear: 2020,
      firstType: 0,
      firstTypes: [
        {
          id: 0,
          type: '支部大会'
        }, {
          id: 1,
          type: '支部委员会'
        }, {
          id: 2,
          type: '团小组会'
        }],
      firstData: [],
      secondGrade: 2017,
      secondOption: {},
      secondClass: '软件工程1班',
      secondYear: 2020,
      secondType: 0,
      secondTypes: [
        {
          id: 0,
          type: '支部大会'
        }, {
          id: 1,
          type: '支部委员会'
        }, {
          id: 2,
          type: '团小组会'
        }],
      secondData: [],
      activeName: 'first',
      dialogFormVisible: false,
      form: {
        id: '',
        date: '',
        address: '',
        host: '',
        subject: '',
        count: '',
        content: '',
        condition: '',
        summary: ''

      },
      formLabelWidth: '80px'
    }
  },
  created: function () {
    //获取对应年级班级和年份信息
    getGradeClassesYears().then(response => {
      this.options = response.data.options;
      //初始化first,second
      this.firstGrade = this.options[0].grade;
      this.firstYear = this.options[0].years[0];
      this.secondGrade = this.options[0].grade;
      this.secondClass = this.options[0].classes[0];
      //获取原始对比数据
      //1.年级各班数据
      this.firstSearch();
      //2.班级历史数据
      this.secondSearch();
      //处理数据并渲染
    }).catch(err => {
      console.log(err)
    })
  },
  watch: {
    secondGrade: function (val) {
      this.secondOption = this.options.find(function (x) { return x.grade === val; })
      this.secondClass = this.secondOption.classes[0];
      this.secondType = this.secondTypes[0].id;
    },
    firstGrade: function (val) {
      this.firstOption = this.options.find(function (x) { return x.grade === val; })
      this.firstYear = this.firstOption.years[0];
      this.firstType = this.firstTypes[0].id;
    }
  },
  methods: {
    firstSearch() {//查询一个年级各班对应的数据
      let data = {
        grade: this.firstGrade,
        year: this.firstYear,
        type: this.firstType
      };
      getGradeMeetingMinutes(data).then(response => {
        this.firstData = response.data.data;
        this.drawFirstChart();
      }).catch(err => {
        console.log(err);
      })
    },
    secondSearch() {//查询一个班级对应各年份的数据
      let user = this.secondGrade + "级" + this.secondClass + "团支部";
      let data = {
        user: user,
        type: this.secondType
      };
      getHistoryMeetingMinutes(data).then(response => {
        this.secondData = response.data.data;
        this.drawSecondChart();
      }).catch(err => {
        console.log(err);
      })
    },
    drawFirstChart() {
      let classes = this.firstData.map(x => { return x.class })
      let numbers = this.firstData.map(x => { return x.list.length }) // 生成数组
      let firstMeetingType = this.firstTypes.find(x => x.id == this.firstType).type;
      let title = this.firstGrade + '级各班' + firstMeetingType + '会议记录次数对比'

      // 基于准备好的dom，初始化echarts实例
      let firstChart = this.$echarts.init(document.getElementById('firstChart'))
      // 绘制图表
      firstChart.setOption({
        title: {
          text: title,
          left: 'center',
          color: "#fffff"
        },
        tooltip: {},
        xAxis: {
          data: classes,
          axisLabel: {
            interval: 0,
            rotate: 45,//倾斜度 -90 至 90 默认为0
            margin: 11,
            textStyle: {
              color: "#fffff"
            }
          }
        },
        yAxis: {
          minInterval: 1
        },
        series: [{
          name: '会议记录次数',
          type: 'bar',
          data: numbers,
          barWidth: 30,//柱图宽度
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = ['#1890ff'];
                return colorList[params.dataIndex % colorList.length];
              }
            }
          }
        },
        ]
      });
    },
    drawSecondChart() {
      let years = this.secondData.map(x => { return x.year })
      let numbers = this.secondData.map(x => { return x.list.length }) // 生成数组
      let secondMeetingType = this.secondTypes.find(x => x.id == this.secondType).type;
      let title = this.secondGrade + "级" + this.secondClass + secondMeetingType + '会议记录历史数据'

      let secondChart = this.$echarts.init(document.getElementById('secondChart'))


      secondChart.setOption({
        title: {
          text: title,
          left: 'center',
          color: "#fffff"
        },
        xAxis: {
          type: 'category',
          data: years
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [{
          data: numbers,
          type: 'line',
          name: '会议记录次数',
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#1890ff'
              }
            }
          }
        }]
      });
    },
    open(row) {
      this.dialogFormVisible = true;
      this.form = row;
    }
  }
}
</script>